<template>
	<el-drawer title="生成配置" v-model="visible" :size="1300" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="dialogForm" :model="form" :rules="rules" label-width="90px" label-position="right">
					<el-row>
						<el-col :span="5">
							<el-form-item label="表名" prop="tableName">
								<el-input v-model="form.tableName" placeholder="请输入表名" disabled></el-input>
							</el-form-item>
							<el-form-item label="实体" prop="genClass">
								<el-input v-model="form.genClass" placeholder="请输入实体"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="功能名" prop="genFunction">
								<el-input v-model="form.genFunction" placeholder="请输入功能名"></el-input>
							</el-form-item>
							<el-form-item label="模块" prop="genModule">
								<el-input v-model="form.genModule" placeholder="取表前缀如sys_%取sys"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="项目名" prop="projectName">
								<el-input v-model="form.projectName" placeholder="请输入项目名"></el-input>
							</el-form-item>
							<el-form-item label="作者" prop="genAuthor">
								<el-input v-model="form.genAuthor" placeholder="请输入作者"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="项目编码" prop="projectCode">
								<el-input v-model="form.projectCode" placeholder="请输入项目编码"></el-input>
							</el-form-item>
							<el-form-item label="作者邮箱" prop="genAuthorEmail">
								<el-input v-model="form.genAuthorEmail" placeholder="请输入作者邮箱"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="继承基类" prop="extendBaseEntity">
								<el-switch v-model="form.extendBaseEntity" :active-value="true" :inactive-value="false"></el-switch>
							</el-form-item>
							<el-form-item label="操作日志" prop="genOperateLog">
								<el-switch v-model="form.genOperateLog" :active-value="true" :inactive-value="false"></el-switch>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="5">
							<el-form-item label="生成页面" prop="genPage">
								<el-switch v-model="form.genPage" :active-value="true" :inactive-value="false" @change="changeGenPage"></el-switch>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="后端路径" prop="genBackendPath">
								<el-input v-model="form.genBackendPath" placeholder="请输入后端路径"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item label="功能配置">
								<el-checkbox v-model="form.genAdd">增</el-checkbox>
								<el-checkbox v-model="form.genRemove">删</el-checkbox>
								<el-checkbox v-model="form.genEdit">改</el-checkbox>
								<el-checkbox v-model="form.genSelect" :disabled="form.genPage">查</el-checkbox>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item v-if="form.genPage" label="上级菜单" prop="parentMenuId">
								<el-cascader v-model="form.parentMenuId" :options="menuList" :props="menuProps" clearable style="width: 100%;"></el-cascader>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="5">
							<el-form-item v-if="form.genPage" label="表格类型" prop="genPageTableType">
								<sc-select v-model="form.genPageTableType" dict="table_type" placeholder="请选择表格类型" style="width: 100%;" clearable></sc-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item v-if="form.genPage" label="表单类型" prop="genPageFormType">
								<sc-select v-model="form.genPageFormType" dict="form_type" placeholder="请选择表单类型" style="width: 100%;" clearable></sc-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item v-if="form.genPage" label="打开方式" prop="genPageFormOpen">
								<sc-select v-model="form.genPageFormOpen" dict="open_type" placeholder="请选择打开方式" style="width: 100%;" clearable></sc-select>
							</el-form-item>
						</el-col>
						<el-col :span="9">
							<el-form-item v-if="form.genPage" label="前端路径" prop="genFrontPath">
								<el-input v-model="form.genFrontPath" placeholder="请输入前端路径"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<sc-form-table v-model="form.columnList" size="small" drag-sort placeholder="暂无数据" :hideAdd="true" :hideDelete="true">
					<el-table-column prop="columnName" label="字段名" width="140" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.columnName" placeholder="字段名" disabled></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="columnType" label="字段类型" width="130" align="center">
						<template #default="scope">
							<el-select v-model="scope.row.columnType" placeholder="请选择" style="width: 100%;" disabled>
								<el-option v-for="(item, index) in columnTypeList" :key="index" :label="item.columnType" :value="item.columnType"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="columnPk" label="主键" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.columnPk" disabled></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="columnNotNull" label="非空" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.columnNotNull" disabled></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="columnIncrement" label="自增" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.columnIncrement" disabled></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="javaField" label="属性名" width="150" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.javaField" placeholder="属性名"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="javaFieldComment" label="属性描述" width="150" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.javaFieldComment" placeholder="属性描述"></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="javaType" label="属性类型" width="150" align="center">
						<template #default="scope">
							<el-select v-model="scope.row.javaType" placeholder="请选择" style="width: 100%;" @change="changeJavaType(scope.row)">
								<el-option v-for="(item, index) in javaTypeList" :key="index" :label="item.dictItem" :value="item.dictItem"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="pageFormRequired" label="必填" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.pageFormRequired"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="pageForm" label="表单" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.pageForm"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="pageTable" label="表格" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.pageTable"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="pageTableQuery" label="查询" width="50" align="center">
						<template #default="scope">
							<el-checkbox v-model="scope.row.pageTableQuery"></el-checkbox>
						</template>
					</el-table-column>
					<el-table-column prop="pageTableQueryType" label="查询方式" width="150" align="center">
						<template #default="scope">
							<el-select v-model="scope.row.pageTableQueryType" placeholder="请选择" style="width: 100%;">
								<el-option v-for="(item, index) in queryTypeList" :key="index" :label="item.dictItem" :value="item.dictValue"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="pageHtmlType" label="页面组件" width="150" align="center">
						<template #default="scope">
							<el-select v-model="scope.row.pageHtmlType" placeholder="请选择" style="width: 100%;">
								<el-option v-for="(item, index) in htmlTypeList" :key="index" :label="item.dictItem" :value="item.dictValue"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="pageDictType" label="字典" width="150" align="center">
						<template #default="scope">
							<el-select v-model="scope.row.pageDictType" placeholder="请选择" style="width: 100%;">
								<el-option v-for="(item, index) in dictTypeList" :key="index" :label="item.dictName" :value="item.dictCode"></el-option>
							</el-select>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaving" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>

	</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			loading: false,
			visible: false,
			isSaving: false,
			// 所需数据选项
			menuList: [],
			menuProps: {
				value: "id",
				label: "title",
				children: "children",
				emitPath: false,
				checkStrictly: true,
				disabled: (node) => {
					// 禁用首页
					return node.id === 1;
				}
			},
			columnTypeList: [],
			javaTypeList: [],
			queryTypeList: [],
			htmlTypeList: [],
			dictTypeList: [],
			// 表单数据
			form: {
				tableName: null,
				genClass: null,
				genModule: null,
				genPageTableType: '1',
				tableComment: null,
				genFunction: null,
				parentMenuId: null,
				genPageFormType: '1',
				genPageFormOpen: '1',
				projectName: null,
				genAuthor: null,
				extendBaseEntity: true,
				genBackendPath: null,
				projectCode: null,
				genAuthorEmail: null,
				genPage: true,
				genFrontPath: null,
				genOperateLog: true,
				genAdd: true,
				genRemove: true,
				genEdit: true,
				genSelect: true,
				columnList: []
			},
			// 表单验证规则
			rules: {
				tableName: [
					{required: true, message: '请输入表名', trigger: 'blur'}
				],
				genClass: [
					{required: true, message: '请输入实体名', trigger: 'blur'}
				],
				genModule: [
					{required: true, message: '请输入模块', trigger: 'blur'}
				],
				genPageTableType: [
					{required: true, message: '请选择表格类型', trigger: 'blur'}
				],
				genPageFormOpen: [
					{required: true, message: '请选择打开方式', trigger: 'blur'}
				],
				genFunction: [
					{required: true, message: '请输入功能', trigger: 'blur'}
				],
				genPageFormType: [
					{required: true, message: '请选择表单类型', trigger: 'blur'}
				],
				projectName: [
					{required: true, message: '请输入项目名', trigger: 'blur'}
				],
				genAuthor: [
					{required: true, message: '请输入作者', trigger: 'blur'}
				],
				extendBaseEntity: [
					{required: true, message: '请选择是否继承基类', trigger: 'blur'}
				],
				genBackendPath: [
					{required: true, message: '请输入后端路径', trigger: 'blur'}
				],
				projectCode: [
					{required: true, message: '请输入项目编码', trigger: 'blur'}
				],
				genAuthorEmail: [
					{required: true, message: '请输入作者邮箱', trigger: 'blur'}
				],
				genPage: [
					{required: true, message: '请选择生成页面', trigger: 'blur'}
				],
				genFrontPath: [
					{required: true, message: '请输入前端路径', trigger: 'blur'}
				],
				genOperateLog: [
					{required: true, message: '请选择操作日志', trigger: 'blur'}
				],
				columnList: [
					{required: true, message: '请填写字段', trigger: 'blur'}
				]
			},
			columnData: {
				columnName: null,
				columnType: null,
				columnPk: false,
				columnNotNull: false,
				columnIncrement: false,
				javaField: null,
				javaFieldComment: null,
				javaType: 'String',
				javaTypePackage: 'java.lang.String',
				pageFormRequired: false,
				pageForm: false,
				pageTable: false,
				pageTableQuery: false,
				pageTableQueryType: null,
				pageHtmlType: 'input',
				pageDictType: null
			}
		}
	},
	mounted() {
		this.getMenu();
		this.getColumnType();
		this.getJavaType();
		this.getQueryType();
		this.getHtmlType();
		this.getDictType();
	},
	methods: {
		// 显示
		open() {
			this.visible = true;
			return this;
		},
		// 加载数据
		async getMenu() {
			this.menuList = await this.$API.manage.permission.list.get();
		},
		async getColumnType() {
			this.columnTypeList = await this.$API.gen.columnMap.list.get();
		},
		async getJavaType() {
			this.javaTypeList = await this.$API.system.dict.getDataByCode.get({dictCode: 'java_type'});
		},
		async getQueryType() {
			this.queryTypeList = await this.$API.system.dict.getDataByCode.get({dictCode: 'query_type'});
		},
		async getHtmlType() {
			this.htmlTypeList = await this.$API.system.dict.getDataByCode.get({dictCode: 'html_type'});
		},
		async getDictType() {
			this.dictTypeList = await this.$API.system.dict.list.get();
		},
		// 表单注入数据
		setData(data) {
			this.loading = true;
			this.$API.gen.table.detail.get(data.id).then(data => {
				Object.assign(this.form, data)
			})
			this.loading = false;
		},
		changeGenPage(val) {
			if (val) {
				this.form.genSelect = true;
			}
		},
		changeJavaType(row) {
			const javaType = row.javaType;
			const type = this.javaTypeList.filter(item => javaType === item.dictItem);
			row.javaTypePackage = type[0].dictValue;
		},
		// 表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaving = true;
					this.$API.gen.table.edit.put(this.form).then(() => {
						this.$emit('success');
						this.visible = false;
						this.$message.success("保存成功");
					}).catch(() => {
						this.isSaving = false;
					});
				}
			})
		}
	}
}
</script>

<style>
</style>
